<template>
  <div>
    <NormalForm pageTitle="群发客户" :operateForm="queryForm" :formList="formList" @handleQuery="handleQuery"
      @handleReset="handleReset" :enumOpt="enumOpt"></NormalForm>
    <div class="g-card">
      <div class="right-btn">
        <el-button type="primary" size="mini" style="height: 32px; margin-left: 80px" @click="addDispatch">新建群发
        </el-button>
      </div>
      <div style="padding: 0 20px 20px 20px">
        <!-- 表格 -->
        <el-table v-loading="loading" :data="tableList" style="width: 100%" height="415">
          <el-table-column type="index" width="55" align="center" label="序号" />
          <el-table-column label="群发名称" align="center" prop="messageName" width="180"
            show-overflow-tooltip></el-table-column>
          <el-table-column label="群发类型" prop="timedTask" align="center" width="140">
            <template slot-scope="{ row }">
              <div>
                <el-tag type="warning" v-if="row.timedTask == '1'">定时发送
                </el-tag>
                <el-tag type="success" v-if="row.timedTask == '0'">立即发送
                </el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="发送状态" prop="settingStatus" align="center" width="140"></el-table-column>
          <el-table-column label="发送时间" align="center" prop="settingTime" show-overflow-tooltip :width="170" />
          <el-table-column label="审核状态" prop="examineStatus" align="center" width="140">
            <template slot-scope="{ row }">
              <div>
                <el-tag type="warning" v-if="row.examineStatus == '审核失败'">审核失败
                </el-tag>
                <el-tag type="success" v-if="row.examineStatus == '审核成功'">审核成功
                </el-tag>
                <span style="padding: 1px 8px;" class="tag-info tag" v-if="row.examineStatus == '待审核'">待审核</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center" prop="examineRemark" :min-width="180" show-overflow-tooltip></el-table-column>
          <el-table-column label="审核人" align="center" prop="audito" show-overflow-tooltip :width="140" />
          <el-table-column label="欢迎语内容" align="center" prop="content" :min-width="180"
            show-overflow-tooltip></el-table-column>
          <el-table-column label="已发送成员" align="center" prop="sendUser" width="120px"></el-table-column>
          <el-table-column label="送达客户" align="center" prop="sendCustomer" width="120px"></el-table-column>
          <el-table-column label="未发送成员" align="center" prop="notSendUser" width="120px"></el-table-column>
          <el-table-column label="未发送客户" align="center" prop="notSendCustomer" width="120"></el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="200" class-name="small-padding fixed-width">
            <template slot-scope="{ row }">
              <div class="option-span">
                <!-- v-if="row.checkStatus === '0'"src\views\customerOperations\dispatchCustomer/automaticVersion/\autoList.vue -->
                <span @click="pushCustomer(row.messageId)" v-if="row.examineStatus == '审核成功' && ['进行中','执行成功','已取消'].indexOf(row.settingStatus) == -1" v-has-permi="['group:push:message:auto']">推送</span>
                <span @click="toAudit(row.messageId)" v-if="row.examineStatus == '待审核' && row.settingStatus !== '已取消'" v-has-permi="['push:message:examine']">审核</span>
                <!-- <span @click="pushRemind(row)" v-if="row.checkStatus === '1'">提醒发送</span> -->
<!--                <span @click="detailRoute(row.messageId)">详情</span>-->
                <span @click="$router.push({ path: 'pushProgress', query: {id: row.messageId}})">推送进度</span>
                <span @click="cancelExecute(row.messageId)" v-if="row.settingStatus !== '已取消' && row.settingStatus != '执行成功'">取消执行</span>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <NormalPagination :currentPage="queryForm.pageNum" :pageSize="queryForm.pageSize" :total="total"
          @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>

        <el-dialog title="审核" :visible.sync="visible" width="550px">
          <el-form ref="form" :model="form" :rules="rules" label-width="90px">
            <el-form-item label="审核结果" prop="examineStatus">
              <el-radio-group v-model="form.examineStatus">
                <el-radio label="1" style="margin-right: 20px;">通过</el-radio>
                <el-radio label="2">不通过</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="备注" prop="examineRemark">
              <el-input v-model="form.examineRemark" type="textarea" :rows="4" style="width: 340px;" placeholder="请输入">
              </el-input>
            </el-form-item>
          </el-form>

          <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false" size="mini" :loading="auditLoading">取 消</el-button>
            <el-button type="primary" @click="auditSubmit" size="mini" :loading="auditLoading">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import {
  coeCancel,
  coeExamine,
  getDispathList,
  getWecomMessageCoeList,
  pushCustomer,
  coePush,
  pushRemind
} from '@/api/dispatchCustomer/index'

export default {
  name: 'AutoList',
  data() {
    return {
      visible: false,
      form: {
        examineStatus: '',
        examineRemark: '',
      },
      rules: {},
      queryForm: {
        messageName: '', // 任务名称
        deptId: null, // 管理机构
        sender: '', //创建人
        settingStatus: null,
        selectDate: null,
        examineStatus: null,
        pageNum: 1,
        pageSize: 20,
      },
      formList: [
        {
          label: '群发名称',
          value: '',
          prop: 'messageName',
          type: 'INPUT',
          emunName: '',
        },
        {
          label: '管理机构',
          value: null,
          prop: 'deptId',
          type: 'MANAGE_COM',
          emunName: '',
        },
        {
          label: '创建人',
          value: '',
          prop: 'createList',
          type: 'STAFF',
          emunName: '',
        },
        {
          label: '任务状态',
          value: '',
          prop: 'settingStatus',
          type: 'SELECT',
          emunName: 'settingStatusList',
        },
        {
          label: '',
          value: '',
          prop: 'selectDate',
          type: 'DATE_RANGE',
          formate: 'yyyy-MM-dd',
        },
        {
          label: '审核状态',
          value: '',
          prop: 'examineStatus',
          type: 'SELECT',
          emunName: 'examineStatusList',
        },
      ],
      enumOpt: {
        settingStatusList: [
          {dictValue: '0', dictLabel: '未开始'},
          {dictValue: '1', dictLabel: '进行中'},
          {dictValue: '2', dictLabel: '执行成功'},
          {dictValue: '3', dictLabel: '执行失败'},
          {dictValue: '4', dictLabel: '已取消'},
        ],
        examineStatusList: [
          {dictValue: '0', dictLabel: '待审核'},
          {dictValue: '1', dictLabel: '审核成功'},
          {dictValue: '2', dictLabel: '审核失败'},
        ],
      },
      total: 0,
      loading: false,
      tableList: [],
      auditMessageId: '',
      auditLoading: false,
    }
  },
  mounted() {
    this.handleQuery()
  },
  methods: {
    // 远程搜索任务名称 + 搜索
    handleQuery() {
      this.queryForm.pageNum = 1;
      this.getDispathListFn();
    },
    getDispathListFn() {
      this.loading = true;
      let params = {
        deptId: this.queryForm.deptId,
        messageName: this.queryForm.messageName,
        pageNum: this.queryForm.pageNum,
        pageSize: this.queryForm.pageSize,
        settingStatus: this.queryForm.settingStatus,
        examineStatus: this.queryForm.examineStatus,
        sender: this.queryForm.createList ? this.queryForm.createList + '' : '',
        startTime: this.queryForm.selectDate && this.queryForm.selectDate[0],
        endTime: this.queryForm.selectDate && this.queryForm.selectDate[1],
        edition: '2'
      }
      getWecomMessageCoeList(params).then((res) => {
        if (res.code === 200) {
          this.tableList = res.rows || []
          this.total = res.total || 0
        }
        this.loading = false;
      }).catch(() => {
        this.loading = false
      })
    },
    //重置
    handleReset() {
      this.queryForm = {
        messageName: '',
        deptId: null,
        sender: '',
        settingStatus: null,
        selectDate: null,
        examineStatus: null,
        createList: '',
        pageNum: 1,
        pageSize: 20
      };
      this.getDispathListFn()
    },
    handleSizeChange(val) {
      this.queryForm.pageNum = 1
      this.queryForm.pageSize = val
      this.getDispathListFn()
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum = val
      this.getDispathListFn()
    },
    // 新建群发
    addDispatch() {
      this.$router.push({ path: 'addDispatch', query: { activeName: '1', flag: '1' } });
    },

    // 推送
    pushCustomer(ids) {
      coePush({ messageId: ids }).then((res) => {
        res.code == 200 ? this.$message.success('推送成功！') : this.$message.error('推送失败！')
        this.getDispathListFn()
      }).catch(() => { })
    },

    //提醒发送
    pushRemind(val) {
      let data = {
        messageId: val.ids,
        messageName: val.messageName,
        settingTime: val.settingTime,
        sender: '',
      }
      pushRemind(data).then((res) => {
        res.code == 200 ? this.$message.success(res.data) : this.$message.error('提醒发送失败！')
      }).catch(() => { })
    },
    // 详情
    detailRoute(ids) {
      this.$router.push({
        name: 'DispatchCustomerDetails',
        query: { messageId: ids },
      })
    },
    // 审核
    toAudit(val){
      this.visible = true
      this.auditMessageId = val
      this.form = {
        examineStatus: '',
        examineRemark: '',
      }
    },
    // 审核结果
    auditSubmit(){
      if(!this.form.examineStatus) return this.$message.error('未勾选审核结果，请核实')
      this.auditLoading = true
      let obj = {
        ...this.form,
        messageId: this.auditMessageId
      }
      coeExamine(obj).then(res => {
        if(res.code == 200){
          this.visible = false
          this.$message.success('审核成功')
          this.getDispathListFn()
        }
        this.auditLoading = false
      }).catch(() => {
        this.auditLoading = false
      })
    },
    cancelExecute(val){
      coeCancel({messageId: val}).then(res => {
        if(res.code == 200) this.$message.success('取消执行成功')
        this.getDispathListFn()
      })
    }
  },
}
</script>


<style lang="scss" scoped>
@import '../../../../styles/base.scss';

::v-deep .el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
  border-bottom: none !important;
}

::v-deep .el-table .el-table__header-wrapper th {
  background-color: #f8f8f9 !important;
}

::v-deep .el-tag.el-tag--success {
  background-color: #e6f9ef !important;
  border-color: #cdf3df !important;
  color: #06c160 !important;
}
</style>
